<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="1200px"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <div style="width: 100%; text-align: right;line-height: 30px;margin-bottom: 5px;">
      <el-button type="success" size="mini" @click="add">新增搜索框</el-button>
    </div>
    <w-table
      :data="itemList"
      :columns="columns"
      :is-paging="false"
      row-key="Id"
    >
      <template slot="filterMode" slot-scope="e">
        {{ QueryFilterMode[e.row.FilterMode].text }}
      </template>
      <template slot="isMoreFilter" slot-scope="e">
        {{ e.row.IsMoreFilter ? '是': '否' }}
      </template>
      <template slot="sort" slot-scope="e">
        <el-button
          v-if="e.row.Sort != 1"
          icon="el-icon-caret-top"
          size="mini"
          style="float: left"
          circle
          @click="upItem(e.row)"
        />
        <el-button
          v-if="e.row.Sort != maxSort"
          size="mini"
          style="float: right"
          icon="el-icon-caret-bottom"
          circle
          @click="downItem(e.row)"
        />
      </template>
      <template slot="action" slot-scope="e">
        <el-button
          icon="el-icon-edit"
          size="mini"
          type="primary"
          circle
          @click="edit(e.row)"
        />
        <el-button
          size="mini"
          icon="el-icon-delete"
          type="danger"
          circle
          @click="drop(e.row)"
        />
      </template>
    </w-table>
    <controlEdit :id="id" :form-id="formId" :location="1" :visible.sync="editVisible" @save="save" />
  </el-dialog>
</template>

<script>
import { Gets, Delete, SetSort } from '@/customForm/api/phyQuery'
import { QueryFilterMode } from '@/customForm/config/formConfig'
import controlEdit from './queryControlEdit.vue'
export default {
  components: {
    controlEdit
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    formId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      QueryFilterMode,
      title: '搜索栏配置',
      itemList: [],
      maxSort: 1,
      editVisible: false,
      isRefresh: false,
      id: null,
      columns: [{
        key: 'Label',
        title: '标题',
        align: 'center'
      }, {
        key: 'ControlName',
        title: '控件名',
        align: 'center'
      }, {
        key: 'FilterMode',
        title: '筛选方式',
        align: 'center',
        slotName: 'filterMode'
      }, {
        key: 'IsMoreFilter',
        title: '在更多筛选中显示',
        align: 'center',
        slotName: 'isMoreFilter'
      }, {
        key: 'ColName',
        title: '查询列',
        align: 'left'
      }, {
        key: 'Sort',
        title: '排序',
        align: 'center',
        slotName: 'sort'
      }, {
        key: 'action',
        title: '操作',
        align: 'left',
        slotName: 'action'
      }]
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.isRefresh = false
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    async reset() {
      const list = await Gets(this.formId, 1)
      this.initMaxSort(list)
      this.itemList = list
    },
    async upItem(row) {
      const index = this.itemList.findIndex(a => a.Id === row.Id)
      if (index > 0) {
        const t = this.itemList[index - 1]
        await SetSort([
          { Id: row.Id, Value: t.Sort },
          { Id: t.Id, Value: row.Sort }
        ])
        this.reset()
      }
    },
    async downItem(row) {
      const index = this.itemList.findIndex(a => a.Id === row.Id)
      if (index < this.itemList.length) {
        const t = this.itemList[index + 1]
        await SetSort([
          { Id: row.Id, Value: t.Sort },
          { Id: t.Id, Value: row.Sort }
        ])
        this.reset()
      }
    },
    initMaxSort(list) {
      if (list && list.length > 0) {
        let sort = 1
        list.forEach(c => {
          if (c.Sort > sort) {
            sort = c.Sort
          }
        })
        this.maxSort = sort
      } else {
        this.maxSort = 1
      }
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close', this.isRefresh)
    },
    add() {
      this.id = null
      this.editVisible = true
    },
    save() {
      this.isRefresh = true
      this.reset()
    },
    edit(row) {
      this.id = row.Id
      this.editVisible = true
    },
    drop(row) {
      const title = '确认删除 ' + row.Label + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.isRefresh = true
      const list = this.itemList.filter(c => c.Id !== id)
      this.initMaxSort(list)
      this.itemList = list
    }
  }
}
</script>
